<template>
    <a-modal v-model:visible="visible" :title="modalData.title" @cancel="handleCancel" :footer="null" :width="1200"
        class="violation-detail-modal">
        <div class="detail-layout">
            <!-- 左侧信息区域 -->
            <div class="detail-content">
                <!-- 违章信息 -->
                <div class="detail-section">
                    <div class="section-title">违章信息</div>
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="label">违章类型:</span>
                            <span class="value violation-type">{{ violationData.violationType || '不按规定车道行驶' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">车牌:</span>
                            <span class="value">{{ violationData.plateLicense || 'CS-0004试' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">发生时间:</span>
                            <span class="value">{{ violationData.occurrenceTime || '2025/07/16 10:33:21' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">车辆编号:</span>
                            <span class="value">{{ violationData.vehicleCode || 'SVSD566' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">车架号:</span>
                            <span class="value">{{ violationData.plateVin || 'LAWJHV3A8RS719823' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">运营公司:</span>
                            <span class="value">{{ violationData.operatorName || '中通' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">车企:</span>
                            <span class="value">{{ violationData.manufacturerName || '上海仙途智能科技有限公司' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">负责人电话:</span>
                            <span class="value">{{ violationData.linkTel || '18166363546' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">负责人姓名:</span>
                            <span class="value">{{ violationData.linkman || '何德玛' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">报警地点:</span>
                            <span class="value">{{ violationData.alarmLocation || '湖南省长沙市长沙县春华镇S206' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">违章描述:</span>
                            <span class="value">{{ violationData.violationDescription || '转弯跑直行到了' }}</span>
                        </div>
                    </div>
                </div>

                <!-- 底部确认按钮 -->
                <div class="bottom-actions">
                    <a-button type="primary" @click="handleConfirm">确认</a-button>
                </div>
            </div>

            <!-- 右侧地图和证据区域 -->
            <div class="evidence-section">
                <a-tabs v-model:activeKey="activeTab" class="evidence-tabs">
                    <a-tab-pane key="location" tab="位置凭证">
                        <div class="map-container">
                            <div class="map-placeholder">
                                <div class="map-content">
                                    <div class="map-labels">
                                        <div class="building-label">19幢</div>
                                        <div class="building-label">25幢</div>
                                        <div class="building-label">26幢</div>
                                        <div class="building-label">1栋</div>
                                        <div class="building-label">2栋</div>
                                        <div class="building-label">5栋</div>
                                        <div class="landmark-label">华地学府 公园售楼部</div>
                                    </div>
                                    <div class="location-pin">
                                        <div class="pin-icon">📍</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane key="evidence" tab="证据材料">
                        <div class="evidence-container">
                            <div class="evidence-placeholder">
                                <div class="evidence-content">
                                    <div class="evidence-item">
                                        <div class="evidence-image">
                                            <div class="image-placeholder">图片1</div>
                                        </div>
                                        <div class="evidence-desc">违章现场照片</div>
                                    </div>
                                    <div class="evidence-item">
                                        <div class="evidence-image">
                                            <div class="image-placeholder">图片2</div>
                                        </div>
                                        <div class="evidence-desc">车辆识别照片</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>
    </a-modal>
</template>

<script setup>
import { ref, reactive, defineExpose, defineEmits } from 'vue'
import { message } from 'ant-design-vue'

const emit = defineEmits(['success'])

const visible = ref(false)
const activeTab = ref('location')
const modalData = ref({
    title: '查看',
    id: ''
})

const violationData = reactive({
    // 违章信息
    violationType: '',
    plateLicense: '',
    occurrenceTime: '',
    vehicleCode: '',
    plateVin: '',
    operatorName: '',
    manufacturerName: '',
    linkTel: '',
    linkman: '',
    alarmLocation: '',
    violationDescription: '',
    
    // 其他信息
    reporter: '',
    reporterUnit: '',
    reportTime: '',
    reviewStatus: '',
    reviewer: '',
    reviewComment: '',
    reviewTime: '',
    evidenceMaterial: 0
})

// 显示弹窗
const showModal = (data) => {
    modalData.value.title = data.title || '查看'
    modalData.value.id = data.id || ''
    visible.value = true

    // 加载违章数据
    if (data.id) {
        Object.assign(violationData, {
            ...data,
            // 模拟数据
            violationType: data.violationType || '不按规定车道行驶',
            plateLicense: data.plateLicense || 'CS-0004试',
            occurrenceTime: data.occurrenceTime || '2025/07/16 10:33:21',
            vehicleCode: data.vehicleCode || 'SVSD566',
            plateVin: data.plateVin || 'LAWJHV3A8RS719823',
            operatorName: data.operatorName || '中通',
            manufacturerName: data.manufacturerName || '上海仙途智能科技有限公司',
            linkTel: data.linkTel || '18166363546',
            linkman: data.linkman || '何德玛',
            alarmLocation: data.alarmLocation || '湖南省长沙市长沙县春华镇S206',
            violationDescription: data.violationDescription || '转弯跑直行到了'
        })
    }
}

// 确认
const handleConfirm = () => {
    visible.value = false
    emit('success', violationData)
}

// 取消
const handleCancel = () => {
    visible.value = false
}

// 暴露方法给父组件
defineExpose({ showModal })
</script>

<style scoped lang="less">
.violation-detail-modal {
    :deep(.ant-modal-body) {
        padding: 24px;
    }
}

.detail-layout {
    display: flex;
    gap: 24px;
    min-height: 600px;
}

.detail-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-section {
    .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid #f0f0f0;
    }

    .info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 24px;

        .info-item {
            display: flex;
            align-items: center;
            min-height: 32px;

            .label {
                font-weight: 500;
                color: #666;
                min-width: 100px;
                margin-right: 8px;
            }

            .value {
                color: #333;
                flex: 1;

                &.violation-type {
                    color: #ff4d4f;
                    font-weight: 500;
                }
            }
        }
    }
}

.bottom-actions {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #f0f0f0;
}

.evidence-section {
    width: 400px;
    border-left: 1px solid #f0f0f0;
    padding-left: 24px;
    
    .evidence-tabs {
        :deep(.ant-tabs-content-holder) {
            height: 500px;
        }
        
        :deep(.ant-tabs-tabpane) {
            height: 100%;
        }
    }
}

.map-container {
    height: 100%;
    
    .map-placeholder {
        width: 100%;
        height: 100%;
        background: #f5f5f5;
        border-radius: 8px;
        position: relative;
        overflow: hidden;
        
        .map-content {
            width: 100%;
            height: 100%;
            position: relative;
            background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
            
            .map-labels {
                position: absolute;
                top: 20px;
                left: 20px;
                right: 20px;
                bottom: 20px;
                
                .building-label {
                    position: absolute;
                    font-size: 12px;
                    color: #666;
                    background: rgba(255, 255, 255, 0.8);
                    padding: 2px 6px;
                    border-radius: 4px;
                    
                    &:nth-child(1) { top: 10%; left: 20%; }
                    &:nth-child(2) { top: 15%; right: 25%; }
                    &:nth-child(3) { top: 25%; left: 15%; }
                    &:nth-child(4) { bottom: 40%; left: 30%; }
                    &:nth-child(5) { bottom: 30%; right: 20%; }
                    &:nth-child(6) { bottom: 20%; left: 40%; }
                }
                
                .landmark-label {
                    position: absolute;
                    bottom: 10%;
                    right: 10%;
                    font-size: 12px;
                    color: #666;
                    background: rgba(255, 255, 255, 0.8);
                    padding: 2px 6px;
                    border-radius: 4px;
                }
            }
            
            .location-pin {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                
                .pin-icon {
                    font-size: 24px;
                    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
                }
            }
        }
    }
}

.evidence-container {
    height: 100%;
    
    .evidence-placeholder {
        width: 100%;
        height: 100%;
        padding: 16px;
        
        .evidence-content {
            display: flex;
            flex-direction: column;
            gap: 16px;
            
            .evidence-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                
                .evidence-image {
                    width: 100%;
                    height: 120px;
                    background: #f5f5f5;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 2px dashed #d9d9d9;
                    
                    .image-placeholder {
                        color: #999;
                        font-size: 14px;
                    }
                }
                
                .evidence-desc {
                    font-size: 12px;
                    color: #666;
                    text-align: center;
                }
            }
        }
    }
}

// 响应式设计
@media (max-width: 1200px) {
    .detail-layout {
        flex-direction: column;

        .evidence-section {
            width: 100%;
            border-left: none;
            border-top: 1px solid #f0f0f0;
            padding-left: 0;
            padding-top: 24px;
        }
    }

    .detail-section .info-grid {
        grid-template-columns: 1fr;
    }
}
</style>
